﻿<!DOCTYPE html>
<html style="overflow: hidden;" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keyword" content="Loan, Calculator, loan calculator">
    <link rel="shortcut icon" href="http://thevectorlab.net/flatlab/img/favicon.png">

    <title>FlatLab - Flat &amp; Responsive Bootstrap Admin Template</title>

    <!-- Bootstrap core CSS -->
    <link href="style/bootstrap.css" rel="stylesheet">
    <link href="style/bootstrap-reset.css" rel="stylesheet">
    <!--external css-->
    <link href="css/font-awesome.css" rel="stylesheet" />
    <link href="style/jquery.css" rel="stylesheet" type="text/css" media="screen">
    <link rel="/stylesheet" href="style/owl.css" type="text/css">
    <!-- Custom styles for this template -->
    <link href="style/style.css" rel="stylesheet">
    <link href="style/style-responsive.css" rel="stylesheet">
    <link href="css/DT_bootstrap.css" rel="stylesheet" />
    <link href="asset/grittercss/jquery.gritter.css" rel="stylesheet" />
    <link href="style/Loan.css" rel="stylesheet" />
    <link href="style/datatables.responsive.css" rel="stylesheet" />
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .jqstooltip
        {
            position: absolute;
            left: 0px;
            top: 0px;
            display: block;
            visibility: hidden;
            background: rgb(0, 0, 0) transparent;
            background-color: rgba(0,0,0,0.6);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
            color: white;
            font: 10px arial, san serif;
            text-align: left;
            white-space: nowrap;
            border: 1px solid white;
            z-index: 10000;
        }

        .jqsfield
        {
            color: white;
            padding: 5px 5px 8px 5px;
            font: 10px arial, san serif;
            text-align: left;
        }

        #summaryChangedTable tr td:nth-child(odd)
        {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
        }

        #summaryChangedTable tr td:nth-child(even)
        {
            padding-left: 10px;
            padding-right: 5%;
        }

        .panel-default > .panel-heading
        {
            background-color: #F5F5F5;
        }
    </style>
</head>

<body>

    <section class="" id="container">
        <!--header start-->
        <header class="header white-bg">
            <div class="sidebar-toggle-box">
                <div data-original-title="Toggle Navigation" data-placement="right" class="icon-reorder tooltips"></div>
            </div>
            <!--logo start-->
            <a href="http://thevectorlab.net/flatlab/index.html" class="logo">Flat<span>lab</span></a>
            <!--logo end-->
            <div class="nav notify-row" id="top_menu">
                <!--  notification start -->
                <ul class="nav top-menu">
                    <!-- settings start -->
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <i class="icon-tasks"></i>
                            <span class="badge bg-success">6</span>
                        </a>
                        <ul class="dropdown-menu extended tasks-bar">
                            <div class="notify-arrow notify-arrow-green"></div>
                            <li>
                                <p class="green">You have 6 pending tasks</p>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="task-info">
                                        <div class="desc">Dashboard v1.3</div>
                                        <div class="percent">40%</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                            <span class="sr-only">40% Complete (success)</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="task-info">
                                        <div class="desc">Database Update</div>
                                        <div class="percent">60%</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                            <span class="sr-only">60% Complete (warning)</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="task-info">
                                        <div class="desc">Iphone Development</div>
                                        <div class="percent">87%</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
                                            <span class="sr-only">87% Complete</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="task-info">
                                        <div class="desc">Mobile App</div>
                                        <div class="percent">33%</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 33%">
                                            <span class="sr-only">33% Complete (danger)</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="task-info">
                                        <div class="desc">Dashboard v1.3</div>
                                        <div class="percent">45%</div>
                                    </div>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
                                            <span class="sr-only">45% Complete</span>
                                        </div>
                                    </div>

                                </a>
                            </li>
                            <li class="external">
                                <a href="#">See All Tasks</a>
                            </li>
                        </ul>
                    </li>
                    <!-- settings end -->
                    <!-- inbox dropdown start-->
                    <li id="header_inbox_bar" class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <i class="icon-envelope-alt"></i>
                            <span class="badge bg-important">5</span>
                        </a>
                        <ul class="dropdown-menu extended inbox">
                            <div class="notify-arrow notify-arrow-red"></div>
                            <li>
                                <p class="red">You have 5 new messages</p>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="photo">
                                        <img alt="avatar" src="/Images/avatar-mini.jpg">
                                    </span>
                                    <span class="subject">
                                        <span class="from">Jonathan Smith</span>
                                        <span class="time">Just now</span>
                                    </span>
                                    <span class="message">Hello, this is an example msg.
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="photo">
                                        <img alt="avatar" src="/Images/avatar-mini2.jpg">
                                    </span>
                                    <span class="subject">
                                        <span class="from">Jhon Doe</span>
                                        <span class="time">10 mins</span>
                                    </span>
                                    <span class="message">Hi, Jhon Doe Bhai how are you ?
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="photo">
                                        <img alt="avatar" src="/Images/avatar-mini3.jpg">
                                    </span>
                                    <span class="subject">
                                        <span class="from">Jason Stathum</span>
                                        <span class="time">3 hrs</span>
                                    </span>
                                    <span class="message">This is awesome dashboard.
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="photo">
                                        <img alt="avatar" src="/Images/avatar-mini4.jpg">
                                    </span>
                                    <span class="subject">
                                        <span class="from">Jondi Rose</span>
                                        <span class="time">Just now</span>
                                    </span>
                                    <span class="message">Hello, this is metrolab
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">See all messages</a>
                            </li>
                        </ul>
                    </li>
                    <!-- inbox dropdown end -->
                    <!-- notification dropdown start-->
                    <li id="header_notification_bar" class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">

                            <i class="icon-bell-alt"></i>
                            <span class="badge bg-warning">7</span>
                        </a>
                        <ul class="dropdown-menu extended notification">
                            <div class="notify-arrow notify-arrow-yellow"></div>
                            <li>
                                <p class="yellow">You have 7 new notifications</p>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-danger"><i class="icon-bolt"></i></span>
                                    Server #3 overloaded.
                                    <span class="small italic">34 mins</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-warning"><i class="icon-bell"></i></span>
                                    Server #10 not respoding.
                                    <span class="small italic">1 Hours</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-danger"><i class="icon-bolt"></i></span>
                                    Database overloaded 24%.
                                    <span class="small italic">4 hrs</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-success"><i class="icon-plus"></i></span>
                                    New user registered.
                                    <span class="small italic">Just now</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-info"><i class="icon-bullhorn"></i></span>
                                    Application error.
                                    <span class="small italic">10 mins</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">See all notifications</a>
                            </li>
                        </ul>
                    </li>
                    <!-- notification dropdown end -->
                </ul>
                <!--  notification end -->
            </div>
            <div class="top-nav ">
                <!--search & user info start-->
                <ul class="nav pull-right top-menu">
                    <li>
                        <input class="form-control search" placeholder="Search" type="text">
                    </li>
                    <!-- user login dropdown start-->
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <img alt="" id="profile-pic" width="29" src="/Images/avatar1_small.jpg">
                            <span class="username">Jhon Doue</span>
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu extended logout">
                            <div class="log-arrow-up"></div>
                            <li><a href="Javascript:SaveToProfile(); "><i class=" icon-suitcase"></i>Profile</a></li>
                            <li><a href="Javascript:DeleteProfile();"><i class="icon-cog"></i>Settings</a></li>
                            <li><a href="#"><i class="icon-bell-alt"></i>Notification</a></li>
                            <li><a href="http://thevectorlab.net/flatlab/login.html"><i class="icon-key"></i>Log Out</a></li>
                        </ul>
                    </li>
                    <!-- user login dropdown end -->
                </ul>
                <!--search & user info end-->
            </div>
        </header>
        <!--header end-->
        <!--sidebar start-->
        <aside>
            <div tabindex="5000" style="overflow: hidden;" id="sidebar" class="nav-collapse ">
                <!-- sidebar menu start-->
                <ul style="display: block;" class="sidebar-menu" id="nav-accordion">
                    <li>
                        <a class="active" href="/index.html">
                            <i class="icon-dashboard"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>

                    <li class="sub-menu dcjq-parent-li">
                        <a class="dcjq-parent" href="javascript:;">
                            <i class="icon-laptop"></i>
                            <span>Layouts</span>
                            <span class="dcjq-icon"></span>
                        </a>
                        <ul style="display: none;" class="sub">
                            <li><a href="http://thevectorlab.net/flatlab/boxed_page.html">Boxed Page</a></li>
                            <li><a href="http://thevectorlab.net/flatlab/horizontal_menu.html">Horizontal Menu</a></li>
                            <li><a href="http://thevectorlab.net/flatlab/language_switch_bar.html">Language Switch Bar</a></li>
                        </ul>
                    </li>


                    <!--multi level menu end-->

                </ul>
                <!-- sidebar menu end-->
            </div>
        </aside>
        <!--sidebar end-->
        <!--main content start-->
        <section id="main-content">
            <section class="wrapper">
                <!--state overview start-->
                <div class="row state-overview">
                    <div class="col-lg-3 col-sm-6">
                        <section class="panel">
                            <div class="symbol terques">
                                <i class="icon-user"></i>
                            </div>
                            <div class="value">
                                <h1 class="count">495</h1>
                                <p>New Users</p>
                            </div>
                        </section>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                        <section class="panel">
                            <div class="symbol red">
                                <i class="icon-tags"></i>
                            </div>
                            <div class="value">
                                <h1 class=" count2">947</h1>
                                <p>Sales</p>
                            </div>
                        </section>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                        <section class="panel">
                            <div class="symbol yellow">
                                <i class="icon-shopping-cart"></i>
                            </div>
                            <div class="value">
                                <h1 class=" count3">328</h1>
                                <p>New Order</p>
                            </div>
                        </section>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                        <section class="panel">
                            <div class="symbol blue">
                                <i class="icon-bar-chart"></i>
                            </div>
                            <div class="value">
                                <h1 class=" count4">10328</h1>
                                <p>Total Profit</p>
                            </div>
                        </section>
                    </div>
                </div>
                <!--state overview end-->

                <div class="row">
                    <div class="col-lg-12">
                        <section class="panel">
                            <div class="panel-body">
                                <div class="form-inline">
                                    <form id="loanCal">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div>
                                                    <label for="Principle" class="control-label">ธนาคาร</label>
                                                    <input type="text" placeholder="ธนาคาร" id="BankName" name="BankName" class="form-control">
                                                </div>

                                            </div>
                                            <div class="col-md-4">
                                                <div>
                                                    <label for="BankInterest" class="control-label">ดอกเบี้ยตลอดอายุสัญญา</label>
                                                    <input type="number" placeholder="ดอกเบี้ยตลอดอายุสัญญา" id="BankInterest" name="BankInterest" class="form-control">
                                                </div>

                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div>
                                                    <label for="Principle" class="control-label">เงินต้น</label>
                                                    <input type="number" placeholder="เงินต้น" id="Principle" name="Principle" class="form-control">
                                                </div>

                                            </div>
                                            <div class="col-md-4">
                                                <div>
                                                    <label for="Installment" class="control-label">ผ่อนต่อเดือน</label>
                                                    <input type="number" placeholder="ผ่อนต่อเดือน" id="Installment" name="Installment" class="form-control">
                                                </div>

                                            </div>
                                            <div class="col-md-4">
                                                <div>
                                                    <label for="StartDate" class="control-label">วันที่เริ่มผ่อน</label>
                                                    <input type="text" placeholder="วันที่เริ่มผ่อน" id="StartDate" name="StartDate" class="form-control startdate">
                                                </div>

                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="panel-body">
                                                <button id="buttonProcess" type="submit" class="btn btn-success">คำนวน</button>

                                            </div>



                                        </div>
                                    </form>


                                    <form id="addConditon">
                                        <div class="panel panel-default accordion" id="Div1">
                                            <div class="panel-heading">
                                                <h4 class="panel-title">
                                                    <a data-toggle="collapse" data-parent="#accordion" href="#addCondtionDiv">แสดง ดอกเบี้ยโปรโมชั่น
                                                    </a>
                                                </h4>
                                            </div>
                                            <div id="addCondtionDiv" class="panel-collapse collapse">
                                                <div class="row">
                                                    <div class="col-md-4 ">
                                                        <div>
                                                            <label for="conditionInterest" class="control-label">ดอกเบี้ยโปรโมชั่น</label>
                                                            <input type="number" placeholder="อัตราดอกเบี้ย" id="conditionInterest" name="conditionInterest" required class="form-control">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div>
                                                            <label for="conditionInterestPeriod" class="control-label">ระยะเวลาดอกเบี้ย(เดือน)</label>
                                                            <input type="number" class="form-control" placeholder="ระยะเวลาดอกเบี้ย(เดือน)" id="conditionInterestPeriod" name="conditionInterestPeriod">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <!-- <span class="help-block">ระบุช่วงเวลา</span>-->
                                                        <div class="input-group input-large " data-date="13/07/2013" data-date-format="mm/dd/yyyy">
                                                            <label for="" class="">ดอกเบี้ยเริ่ม</label>
                                                            <input type="text" class="form-control dpd1" name="from" id="conditionFrom" disabled="disabled">

                                                            <span class="input-group-addon" style="background-color: white; border: 0; padding-top: 25px">To</span>
                                                            <label for="" class="">ดอกเบี้ยถึง</label>
                                                            <input type="text" class="form-control dpd2" name="to" id="conditionTo" disabled="disabled">
                                                        </div>

                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <button id="addCondition" type="submit" class="btn btn-success">เพิ่มดอกเบี้ย</button>
                                                        <button id="buttonClearCondition" class="btn btn-success">ลบอัตราดอกเบี้ย</button>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="panel-body adv-table">
                                                        <table class="display table table-bordered table-striped" id="Conditions"></table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>

                                </div>

                                <div class="panel-body">
                                    <div class="adv-table">
                                        <div class="row">
                                            <div class="panel-heading" id="summaryTableDiv" style="display: none">
                                                ตารางสรุปผลการคำนวน
                                            </div>
                                            <table class="table table-bordered table-striped"  id="summaryTable" style="display: none">
                                                <thead>
                                                        <tr>
                                                            <th class="centered-cell"></th>
                                                            <th data-class="expand"></th>
                                                            <th data-hide="phone"></th>
                                                            <th ></th>
                                                            <th data-hide="phone"></th>
                                                            <th data-hide="phone,tablet"></th>
                                                            <th data-hide="phone"></th>
                                                            <th data-hide="phone,tablet"></th>
                                                            <th ></th>
                                                        </tr>
                                                    </thead>
                                                    <!--tbody section is required-->
                                                    <tbody></tbody>
                                            </table>
                                            <button id="buttonCompare" class="btn btn-success" style="display: none;">เปรียบเทียบ</button>
                                        </div>
                                        <div class="row">
                                            <div class="panel panel-default accordion" id="filterLoanDetails" style="display: none">
                                                <div class="panel-heading">
                                                    <h4 class="panel-title">
                                                        <a data-toggle="collapse" data-parent="#accordion" href="#filterFunction">แสดงเฉพาะงวดที่เลือก (แนะนำให้ดูเฉพาะเดือนที่ 1 -36 เนื่องจากหลังจากปีที่ 3 ควรจะทำ refinance เผื่อลดอัตราดอกเบี้ย)
                                                        </a>
                                                    </h4>
                                                </div>
                                                <div id="filterFunction" class="panel-collapse collapse">
                                                    <form id="filterForm">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <label for="filterStartPeriod" class="control-label">เริ่มที่งวดที่</label>
                                                                <input type="text" class="form-control" placeholder="เริ่มที่งวดที่" id="filterStartPeriod" name="filterStartPeriod">
                                                            </div>
                                                            <div class="col-md-6">
                                                                <label for="filterEndPeriod" class="control-label">ถึงงวดที่</label>
                                                                <input type="text" class="form-control" placeholder="ถึงงวดที่" id="filterEndPeriod" name="filterEndPeriod">
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="panel-body">
                                                                <button id="filterButton" class="btn btn-success">Filter</button>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="row">
                                            <div class="col-lg-8">
                                                <!-- <div class="panel-heading" id="detailsTableDiv" style="display: none">
                                                    ตารางแสดงรายละเอียด
                                                </div>-->
                                                <table class="table table-bordered table-striped" id="Tablemonthlys" style="display:none">
                                                    <thead>
                                                        <tr>
                                                            <th class="centered-cell">
                                                                </th>
                                                            <th data-class="expand"></th>
                                                            <th></th>
                                                            <th data-hide="phone"></th>
                                                            <th data-hide="phone,tablet"></th>
                                                            <th data-hide="phone,tablet"></th>
                                                        </tr>
                                                    </thead>
                                                    <!--tbody section is required-->
                                                    <tbody></tbody>
                                                </table>
                                            </div>
                                            <div class="col-lg-4">
                                                <div id="chartdiv" style="width: 100%; height: 400px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </section>
                    </div>
                </div>

            </section>

        </section>
        <!--main content end-->
        <!--footer start-->
        <footer class="site-footer">
            <div class="text-center">
                2013 © FlatLab by VectorLab.
                <a href="#" class="go-top">
                    <i class="icon-angle-up"></i>
                </a>
            </div>
        </footer>
        <!--footer end-->
    </section>

    <!-- js placed at the end of the document so the pages load faster -->
    

    <script src="scripts/jquery-1.8.3.min.js"></script>
   
    <script src="scripts/bootstrap.js"></script>
    <script class="include" type="text/javascript" src="scripts/jquery.dcjqaccordion.2.7.js"></script>
    <script src="scripts/jquery.scrollTo.min.js"></script>
    <script src="scripts/jquery.nicescroll.js" type="text/javascript"></script>
    <script src="scripts/jquery.sparkline.js" type="text/javascript"></script>
    <script src="scripts/jquery.easy-pie-chart.js"></script>
    <script src="scripts/owl.js"></script>
    <script src="scripts/jquery.customSelect.min.js"></script>
    <script src="scripts/jquery.validate.min.js"></script>
    <script src="scripts/respond.js"></script>
    <script src="scripts/Utility.js"></script>
    <!-- <script src="scripts/daterangepicker.js"></script>-->
    <script class="include" type="text/javascript" src="scripts/jquery.dcjqaccordion.2.7.js"></script>
    <script src="scripts/bootstrap-datepicker.js"></script>
    <script src="scripts/date.js"></script>
    <script src="amcharts/amcharts.js"></script>
    <!--common script for all pages-->
    <script src="scripts/common-scripts.js"></script>
    <div style="width: 3px; z-index: auto; background: none repeat scroll 0% 0% rgb(64, 64, 64); cursor: default; position: fixed; top: 0px; left: 207px; height: 772px; display: none; opacity: 1;" class="nicescroll-rails" id="ascrail2000">
        <div style="position: relative; top: 0px; float: right; width: 3px; height: 0px; background-color: rgb(232, 64, 63); background-clip: padding-box; border-radius: 10px;"></div>
    </div>
    <div style="height: 3px; z-index: auto; background: none repeat scroll 0% 0% rgb(64, 64, 64); top: 769px; left: 0px; position: fixed; cursor: default; display: none; opacity: 1;" class="nicescroll-rails" id="ascrail2000-hr">
        <div style="position: relative; top: 0px; height: 3px; width: 0px; background-color: rgb(232, 64, 63); background-clip: padding-box; border-radius: 10px; left: 0px;"></div>
    </div>
    <div style="width: 6px; z-index: 1000; background: none repeat scroll 0% 0% rgb(64, 64, 64); cursor: default; position: fixed; top: 0px; height: 100%; right: 0px; opacity: 0;" class="nicescroll-rails" id="ascrail2001">
        <div style="position: relative; top: 61px; float: right; width: 6px; height: 293px; background-color: rgb(232, 64, 63); background-clip: padding-box; border-radius: 10px;"></div>
    </div>
    <div style="height: 6px; z-index: 1000; background: none repeat scroll 0% 0% rgb(64, 64, 64); position: fixed; left: 0px; width: 100%; bottom: 0px; cursor: default; display: none; opacity: 0;" class="nicescroll-rails" id="ascrail2001-hr">
        <div style="position: relative; top: 0px; height: 6px; width: 1600px; background-color: rgb(232, 64, 63); background-clip: padding-box; border-radius: 10px; left: 0px;"></div>
    </div>

    <!--script for this page-->
	<script src="scripts/lodash.min.js"></script>
    <script src="scripts/jquery.dataTables.min.js"></script>
    <script src="scripts/DT_bootstrap.js"></script>
	<script src="scripts/datatables.responsive.js"></script>
    <script src="scripts/sparkline-chart.js"></script>
    <script src="scripts/easy-pie-chart.js"></script>
    <script src="scripts/count.js"></script>
    
    <script src="scripts/LoanObject.js"></script>
    
    <script src="asset/gritter/js/jquery.gritter.min.js"></script>
    <script src="scripts/LoanCalculatorUI.js"></script>
   
    <script type="text/javascript">
 	
        function restoreRow(oTable, nRow) {
            var aData = oTable.fnGetData(nRow);
            var jqTds = $('>td', nRow);

            for (var i = 0, iLen = jqTds.length ; i < iLen ; i++) {
                oTable.fnUpdate(aData[i], nRow, i, false);
            }

            oTable.fnDraw();
        }

        function editRow(oTable, nRow) {
            var aData = oTable.fnGetData(nRow);
            var jqTds = $('>td', nRow);
            jqTds[0].innerHTML = '<input type="text" value="{0}">'.format(aData.Interest);
            jqTds[1].innerHTML = '<input type="text" class="dateFrom" value="{0}">'.format(aData.Datefrom);
            jqTds[2].innerHTML = '<input type="text" class="dateTo" value="{0}">'.format(aData.Dateto);

            jqTds[3].innerHTML = '<a class="edit" href="">Save</a>';

            $(".dateFrom,.dateTo").datepicker();
        }

        function saveRow(oTable, nRow) {
            var jqInputs = $('input', nRow);
            oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
            oTable.fnUpdate(new Date(jqInputs[1].value), nRow, 1, false);
            oTable.fnUpdate(new Date(jqInputs[2].value), nRow, 2, false);
            oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 3, false);
            oTable.fnDraw();
        }
        function SaveToProfile() {
            var localData = (JSON.stringify(loanCal));
            window.localStorage.removeItem('loanDatas');
            window.localStorage.setItem('loanDatas', localData);
        }
        function DeleteProfile() {
            window.localStorage.removeItem('loanDatas');
        }
        function clearConditionField() {
            jQuery('#conditionTo,#conditionFrom,#conditionInterest,#conditionInterestPeriod').val('');
        }
        function clearLoanField() {
            jQuery('#BankName,#Principle,#Installment,#StartDate').val('');
        }

        //owl carousel

        var loanCal = new LoanCalculator();
        var conditional = new Conditional('Conditions');
        var nEditing = null;
        loanCal.SummaryTable = "summaryTable";
        var currentLoan;
        var loansDetails = [];
        var oTable;
        var responsiveHelper = undefined;
        var responsiveHelper2 = undefined;
        var destroyingDataTable = false;
        var breakpointDefinition = {
            tablet: 1024,
            phone: 480
        };
        $(document).ready(function () {

            $("#owl-demo").owlCarousel({
                navigation: true,
                slideSpeed: 300,
                paginationSpeed: 400,
                singleItem: true,
                autoPlay: true

            });
            var localData = JSON.parse(window.localStorage.getItem('loanDatas'));

            if (localData != undefined) {
                loanCal = new LoanCalculator();
                loanCal.SummaryTable = "summaryTable";
                try {
                    var loans = [];
                    $.each(localData.Loans, function (i, o) {
                        var newLoan = new Loan("Tablemonthlys", "chartdiv");
                        newLoan = $.extend({}, newLoan, o);
                        loans.push(newLoan);
                        conditional.Conditions = o.LoanConditions;
                        conditional.PopulateConditionTable();
                    });
                    loanCal.Loans = loans;
                    //loanCal.Summaries = localData.Summaries;
                    loanCal.PopulateSummaryTable(localData.Summaries);
                } catch (e) {
                    //window.localStorage.removeItem('loanDatas');
                }


            }

            jQuery('#conditionInterestPeriod').change(function () {
                var monthPeriod = $(this).val();
                var startDate = jQuery('#StartDate').val();
                if (conditional.Conditions.length == 0) {
                    checkin.setValue(new Date(startDate));
                    checkout.setValue(new Date(startDate).addMonths(parseInt(monthPeriod)));
                }
                else {

                    var d1 = new Date();
                    d1.setTime(conditional.Conditions[conditional.Conditions.length - 1].Dateto.getTime());
                    checkin.setValue(d1);
                    checkout.setValue(d1.addMonths(parseInt(monthPeriod)));
                }
            });
            jQuery("#addConditon").validate({
                rules: {
                    conditionInterest: {
                        required: true,
                        number: true
                    },
                    conditionInterestPeriod: {
                        required: true,
                        number: true
                    }
                },
                messages: {
                    conditionInterest: "กรุณาระบุดอกเบี้ยเป็นตัวเลข",
                    conditionInterestPeriod: "กรุณาระบุระยะเวลาเป็นตัวเลข"
                },
                submitHandler: function (form) {

                    conditional.AddCondition(jQuery('#conditionInterest').val(),
                    jQuery('#conditionFrom').val(),
                    jQuery('#conditionTo').val(),
                    jQuery('#conditionInterestPeriod').val());
                    oTable = conditional.ConditonTable;
                    clearConditionField();
                    return false;
                }
            });
            jQuery("#loanCal").validate({
                rules: {
                    BankName: {
                        required: true
                    },
                    BankInterest: {
                        required: true,
                        number: true
                    },
                    Principle: {
                        required: true,
                        number: true
                    },
                    Installment: {
                        required: true,
                        number: true
                    },
                    StartDate: {
                        required: true,
                        date: true
                    }

                },
                messages: {
                    BankName: "กรุณาระบุธนาคาร(ไม่สามารถซ้ำได้)",
                    BankInterest: "กรุณาระบุดอกเบี้ยธนาคาร",
                    Principle: "กรุณาระบุเงินกู้",
                    Installment: "กรุณาระบุจำนวนผ่อนต่อเดือน",
                    StartDate: "กรุณาระบุวันที่เริ่มผ่อน",
                },
                submitHandler: function (form) {

                    var loan = new Loan("Tablemonthlys", "chartdiv");

                    loan.BankName = jQuery('#BankName').val();
                    loan.Principle = parseFloat(jQuery('#Principle').val());
                    loan.Installment = parseFloat(jQuery('#Installment').val());
                    loan.Interest = parseFloat(jQuery('#BankInterest').val());
                    loan.StartDate = Date.parse(jQuery('#StartDate').val());
                    loan.LoanConditions = conditional.Conditions;
                    loan.CalStart();
                    loanCal.SummaryTable = "summaryTable";
                    loanCal.AddLoan(loan);
                    loanCal.PopulateSummaryTable();
                    jQuery('#summaryTableDiv').show();
                    loanCal.onDetailsClick = function () {
                        jQuery('#filterLoanDetails').show();
                        jQuery('#detailsTableDiv').show();
                    };

                    clearConditionField();
                    clearLoanField();
                    return false;
                }
            });
            $('#filterForm').validate({
                rules: {
                    filterStartPeriod: {
                        required: true,
                        number: true
                    },
                    filterEndPeriod: {
                        required: true,
                        number: true
                    }

                },
                messages: {
                    filterStartPeriod: "กรุณาระบุงวดเริ่มต้น",
                    filterEndPeriod: "กรุณาระบุงวดสิ้นสุด"
                },
                submitHandler: function (form) {
                    var filterStart = jQuery('#filterStartPeriod').val();
                    var filterEnd = jQuery('#filterEndPeriod').val();
                    currentLoan.Filter(filterStart, filterEnd, true, true);
                }
            });


            jQuery('#buttonClearCondition').on('click', function () {
                conditional.ClearCondition();
            });






            var sd = jQuery('.startdate').datepicker({
                dateFormat: "dd-mm-yyyy",
                onRender: function (date) {
                    return date.valueOf() < now.valueOf() ? 'disabled' : '';
                }
            }).on('changeDate', function (ev) {
                $('#conditionInterest').focus();
            });

            var checkin = $('.dpd1').datepicker({
                dateFormat: 'dd-mm-yyyy',
                onRender: function (date) {
                    return date.valueOf() < now.valueOf() ? 'disabled' : '';
                }
            }).on('changeDate', function (ev) {
                if (ev.date.valueOf() > checkout.date.valueOf()) {
                    var newDate = new Date(ev.date)
                    newDate.setDate(newDate.getDate() + 1);
                    checkout.setValue(newDate);
                }
                checkin.hide();
                $('.dpd2')[0].focus();
            }).data('datepicker');
            var checkout = $('.dpd2').datepicker({
                dateFormat: 'dd-mm-yyyy',
                onRender: function (date) {
                    return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
                }
            }).on('changeDate', function (ev) {
                checkout.hide();
            }).data('datepicker');

            //jQuery('#accordion').dcAccordion();




            $(document).on("click", "#example a.edit", function (e) {
                e.preventDefault();

                /* Get the row as a parent of the link that was clicked on */
                var nRow = $(this).parents('tr')[0];

                if (nEditing !== null && nEditing != nRow) {
                    /* Currently editing - but not this row - restore the old before continuing to edit mode */
                    restoreRow(oTable, nEditing);
                    editRow(oTable, nRow);
                    nEditing = nRow;
                }
                else if (nEditing == nRow && $(this).text() == "Save") {
                    /* Editing this row and want to save it */
                    saveRow(oTable, nEditing);
                    nEditing = null;
                }
                else {
                    /* No edit in progress - let's start one */
                    editRow(oTable, nRow);
                    nEditing = nRow;
                }
            });

            $(document).on("click", ".installment-edit", function (e) {
                var nRow = $(this).parents('tr')[0];
                var aData = currentLoan.LoanTable.fnGetData(nRow);
                $(this).replaceWith("<input type='text' class='txtInstallment' value={0} period={1} />".format($(this).text(), aData.Period));
            });

            $(document).on("keypress", ".txtInstallment", function (e) {
                if (e.keyCode === 13) {
                    currentLoan.EditInstallment($(this).attr("period"), this);
                }
            });
            $(document).on("click", "#selectAllSummary", function (e) {
                $("input.summary").prop('checked', this.checked)
                if ($("input.summary:checked").length > 1) {
                    jQuery('#buttonCompare').show();
                }
                else {
                    jQuery('#buttonCompare').hide();
                }
            });
            $(document).on('change', 'input.summary', function () {
                if ($("input.summary:checked").length > 1) {
                    jQuery('#buttonCompare').show();
                }
                else {
                    jQuery('#buttonCompare').hide();
                }
            });
            $('#buttonCompare').click(function () {
                var sData = loanCal.LoanTable.$('input');
                var compareColumn = [];
                var compareData = [];
                var compareMaxrow = 0;
                $.each(sData, function (i) {
                    var ls = loanCal.Loans[i];
                    compareColumn.push({ "mData": "b" + i, "sTitle": ls.BankName });
                    compareData.push(ls.LoanMonthlys);
                    if (ls.LoanMonthlys.length > compareMaxrow) {
                        compareMaxrow = ls.LoanMonthlys.length;
                    }
                    //$.each(ls.LoanMonthlys, function (i2) {
                    //    //compareData.push({b});
                    //});


                });
                var compareList = [];
                for (var i2 = 0; i2 <= compareMaxrow; i2++) {
                    var o = {};
                    $.each(compareData, function (i, oo) {
                        if (oo[i2] == undefined) {
                            o["b" + i] = 0;
                        }
                        else {
                            o["b" + i] = oo[i2].Interest;
                        }

                    });
                    compareList.push(o);
                }

                $('#Tablemonthlys').dataTable({
                    "bPaginate": false,
                    "bFilter": false,
                    "bInfo": false,
                    "bDestroy": true,
                    "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
                    "sPaginationType": "bootstrap",
                    "oLanguage": {
                        "sLengthMenu": "_MENU_ records per page"
                    },
                    "aaData": compareList,
                    "aoColumns": compareColumn
                });
            });
        });

        (function ($) {
            $.fn.goTo = function () {
                $('html, body').animate({
                    scrollTop: $(this).offset().top + 'px'
                }, 'fast');
                return this; // for chaining...
            }
        })(jQuery);
        //custom select box
    </script>

    <div id="fb-root"></div>
    <!--<script>
        window.fbAsyncInit = function () {
            // init the FB JS SDK
            FB.init({
                appId: '497603927020566',                        // App ID from the app dashboard
                status: true,                                 // Check Facebook Login status
                xfbml: true                                  // Look for social plugins on the page
            });

            // Additional initialization code such as adding Event Listeners goes here

            FB.Event.subscribe('auth.authResponseChange', function (response) {
                // Here we specify what we do with the response anytime this event occurs.
                if (response.status === 'connected') {
                    // The response object is returned with a status field that lets the app know the current
                    // login status of the person. In this case, we're handling the situation where they
                    // have logged in to the app.
                    setUser();
                } else if (response.status === 'not_authorized') {
                    // In this case, the person is logged into Facebook, but not into the app, so we call
                    // FB.login() to prompt them to do so.
                    // In real-life usage, you wouldn't want to immediately prompt someone to login
                    // like this, for two reasons:
                    // (1) JavaScript created popup windows are blocked by most browsers unless they
                    // result from direct interaction from people using the app (such as a mouse click)
                    // (2) it is a bad experience to be continually prompted to login upon page load.
                    FB.login();
                } else {
                    // In this case, the person is not logged into Facebook, so we call the login()
                    // function to prompt them to do so. Note that at this stage there is no indication
                    // of whether they are logged into the app. If they aren't then they'll see the Login
                    // dialog right after they log in to Facebook.
                    // The same caveats as above apply to the FB.login() call here.
                    FB.login();
                }
            });
        };



        // Load the SDK asynchronously
        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) { return; }
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/all.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

        function setUser() {
            FB.api('/me', function (response) {
                $(".username").text(response.name);
            });
            FB.api('/me/picture', function (response) {
                $("#profile-pic").attr("src", response.data.url);
            });
        }
    </script>-->

    <!--
    Below we include the Login Button social plugin. This button uses the JavaScript SDK to
    present a graphical Login button that triggers the FB.login() function when clicked. -->
    <!--  <fb:login-button show-faces="false" width="200" max-rows="1"></fb:login-button>-->
</body>
</html>
